<template>
    <!-- <div class="div1">
        <div class="div2">
            <h1>Unknown stuff to be centered.</h1>
            Unknown stuff to be centered. Unknown stuff to be centered. Unknown stuff to be centered. Unknown stuff to be centered. Unknown stuff to be centered.
        </div>
    </div> -->

    <!-- <div class="div1">
        <div class="div2">
            <h1>haorooms案例题目</h1>
                haorooms案例内容
                haorooms案例内容
                haorooms案例内容
                haorooms案例内容
                haorooms案例内容
        </div>
    </div> -->

    <!-- <div class="container">
        <div class="center">
            <h1>haorooms案例题目</h1>
            haorooms案例内容 haorooms案例内容 haorooms案例内容 haorooms案例内容 haorooms案例内容
            <div style="clear:both"></div>
        </div>
    </div> -->

    <div id="vc">
        <div id="vci">
            <div id="content">
                我们垂直居中了，我们水平居中了,真的是可以居中的吗，<br /> 你信不信我反正是新了
                <br /><br /> 美浩工作室是一个90后团队，网站建设设计为一体的一个
                <br /> 年轻化互联网团队！
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'home'
}
</script>

<style>
/* .div1 {
  background-color: blue;
  width: 400px;
  height: 400px;
}
.div2 {
  background-color: red;
  width: 200px;
  height: 200px;
} */

#vc {
  display: table;
  background-color: #000;
  width: 500px;
  height: 500px;
}
#vci {
  vertical-align: middle;
  display: table-cell;
  text-align: center;
}
#content {
  color: #fff;
  border: 1px solid #fff;
  display: inline-block;
}

/* .div1 {
  background-color: blue;
  position: relative;
  width: 400px;
  height: 400px;
}
.div2 {
  background-color: red;
  position: absolute;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
} */

/* .div1 {
  background-color: blue;
  width: 400px;
  height: 400px;
  display: flex;
  justify-content:center;
  align-items:center;
}
.div2 {
  background-color: red;
  width: 200px;
  height: 200px;
} */

/* .div1 {
  display: table;
  width: 100%;
  height: 400px;
}
.div2 {
  background-color: red;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
} */

/* .div1 {
  height: 400px;
  text-align: center;
}
.div1:before {
  content: "";
  display: inline-block;
  height: 50%;
  height:100%;
  vertical-align: middle;
}
.div2 {
  display: inline-block;
  width: 50%;
} */
</style>

